<template>
  <el-popover
    width="300"
    popper-style="border-radius: 12px;box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px;padding: 20px;"
  >
    <template #reference>
      <el-avatar :size="25" :src="store.avatar" @click="userPush" />
    </template>
    <template #default>
      <div class="user">
        <el-avatar :size="60" :src="store.avatar" style="margin-bottom: 8px" />
        <template v-if="store.userinfo">
          <div>昵称：{{ store.userinfo.name ? store.userinfo.name : "暂未设置" }}</div>
          <div>邮箱：{{ store.userinfo.email }}</div>
          <div>注册时间：{{ store.userinfo.createdTime.substring(0, 10) }}</div>
          <div
            class="btn"
            @click="handleLogout"
            style="cursor: pointer; text-align: center"
          >
            退出登录
          </div>
        </template>
      </div>
    </template>
  </el-popover>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useHomeStore } from "@/stores/home";
const store = useHomeStore();
const router = useRouter();
const handleLogout = () => {
  ElMessageBox.confirm("您确认退出登陆吗？", "退出登录", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    center: true,
    confirmButtonClass:"btnClass",
    cancelButtonClass:"btnClass"
  })
    .then(() => {
      localStorage.removeItem("token");
      location.href = '/login'

      ElMessage({
        showClose: true,
        message: '退出成功',
        type: "success",
      });
      // router.push("/login");
    })
  // localStorage.removeItem("token");
  // /**
  //  * 待优化
  //  *   新建一个空白route，跳转过去再跳回来
  //  *   这里先不用这个方法，直接强制刷新网页
  //  */
  // location.reload();
};

const userPush = () => {
  store.personal = !store.personal;
};
</script>

<style lang="less" scoped>

.user {
  display: none;
  width: 100%;
  height: 15rem;
  display: flex;
  flex-flow: column;
  justify-content: space-evenly;
  align-items: center;
  .btn {
    width: 6.5rem;
    z-index: 1;
    position: relative;
    font-size: inherit;
    font-family: inherit;
    color: white;
    border-radius: 6px;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: hsl(236, 32%, 26%);
    overflow: hidden;
    transition: color 0.4s ease-in-out;
  }

  .btn::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #3cefff;
    transform-origin: center;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    transition: transform 0.45s ease-in-out;
  }

  .btn:hover {
    cursor: pointer;
    color: #161616;
  }

  .btn:hover::before {
    transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
  }
}
</style>
<style>
.el-message-box {
  border-radius: 10px !important;
}
.btnClass {
  z-index: 1;
  position: relative;
  font-size: 14px;
  font-family: inherit;
  color: white;
  padding: 0.5em 1em;
  outline: none;
  border: none;
  background-color: hsl(236, 32%, 26%);
  overflow: hidden;
  transition: color 0.4s ease-in-out;
}

.btnClass::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #3cefff;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
}

.btnClass:hover {
  cursor: pointer;
  color: #161616;
}

.btnClass:hover::before {
  transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
}

  .btnClass{
    background-color: black !important;
  }
  .btnClass span{
    color: #fff;
  }
  .btnClass span:hover{
    color: #161616 !important;
  }
</style>